<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>分享页</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link href="__PUBLIC__/share/css/mui.min.css" rel="stylesheet"/>
    <link href="__PUBLIC__/share/css/share.css" rel="stylesheet"/>
</head>

<body>>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>

    <h1 class="mui-title">注册</h1>
</header>
<div class="mui-content">
    <!--login图片-->
    <div class="login_img">
        <img src="__PUBLIC__/share/images/logo.png" alt=""/>
    </div>
    <form id="YourForm" class="mui-input-group">
        <div class="mui-input-row">
            <label><img src="__PUBLIC__/share/images/icon_login_mobile2x.png" alt=""/></label>
            <input name="username" type="tel" maxlength="11" class="mui-input-clear tel" placeholder="手机号" onkeyup="this.value=this.value.replace(/[^\d]/g,'') " onafterpaste="this.value=this.value.replace(/[^\d]/g,'')">
        </div>
        <div class="mui-input-row">
            <label><img src="__PUBLIC__/share/images/icon_reg_verification_code2x.png" alt=""/></label>
            <input name="code" type="num" maxlength="6" class="mui-input-clear code" placeholder="验证码" onkeyup="this.value=this.value.replace(/[^\d]/g,'') " onafterpaste="this.value=this.value.replace(/[^\d]/g,'')">
            <button id="btn0" type="button" class="mui-btn mui-btn-block Obtain">获取</button>
        </div>
        <div class="mui-input-row">
            <label><img src="__PUBLIC__/share/images/icon_login_password2x.png" alt=""/></label>
            <input name="password" maxlength="18" type="password" class="mui-input-clear password" placeholder="密码">
        </div>
        <div class="mui-input-row">
            <label><img src="__PUBLIC__/share/images/icon_login_password2x.png" alt=""/></label>
            <input name="password1"  maxlength="18" type="password" class="mui-input-clear password1" placeholder="确认密码">
        </div>
        <div class="mui-input-row">
            <label><img src="__PUBLIC__/share/images/icon_login_mobile2x.png" alt=""/></label>
            <input name="tel_phone" type="tel" maxlength="11" class="mui-input-clear tel1" placeholder="推荐人手机(可选)" onkeyup="this.value=this.value.replace(/[^\d]/g,'') " onafterpaste="this.value=this.value.replace(/[^\d]/g,'')">
        </div>
        <button id="btn" type="button" class="mui-btn mui-btn-block sure">确认注册</button>
    </form>
</div>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script src="__PUBLIC__/share/js/jquery-3.1.0.min.js"></script>
<script src="__PUBLIC__/share/js/mui.min.js"></script>
<script type="text/javascript">
    mui.init();
    var clock = '';
    var nums = 60;
    var btn;

    function sendCode(thisBtn)
    {
        btn = thisBtn;//console.log(btn);
        btn.disabled = true; //将按钮置为不可点击
//        btn.value = nums+'秒后可重新获取';
        $('#btn0').html(nums+'s');console.log(btn);
        clock = setInterval(doLoop, 1000); //一秒执行一次
    }
    function doLoop()
    {
        nums--;
        if(nums > 0){
            $('#btn0').html(nums+'s');
        }else{
            clearInterval(clock); //清除js定时器
            btn.disabled = false;
//            btn.value = '点击发送验证码';
            $('#btn0').html('获取');
            nums = 60; //重置时间
        }
    }
    $(function () {
        var code_num;
        var telReg = /^1(3[0-9]|4[57]|5[0-35-9]|7[0135678]|8[0-9])\d{8}$/;
        var pwdReg=/(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^.{6,18}$/;
        $("#btn0").on("click", function () {
            console.log($("#YourForm .tel").val());
            $.ajax({
                url: "{:U('AppApi/Member/sendSms')}",
                data: {
                    username: $("#YourForm .tel").val()//输入手机号点击发送验证码   后台需要的手机号
                },
                dataType: 'json',//服务器返回json格式数据
                type: 'post',//HTTP请求类型
                timeout: 10000,//超时时间设置为10秒；
                beforeSen: function () {
                    if (!telReg.test($("#YourForm .tel").val())) {
                        console.log(telReg.test($("#YourForm .tel").val()));return false;
                        mui.alert("请输入正确的手机号码");
                        return false;
                    }
                },
                success: function (data) {
                    //后台响应成功返回code   赋值给code_num
                    code_num = data.code;
                    // 服务器返回响应，根据响应结果，分析是否登录成功；
                    if(code_num == '200') {
                        sendCode(this);
                        alert('发送成功');
                    }

                },
                error: function (xhr, type, errorThrown) {
                    //异常处理；提示异常信息
                    mui.alert(type);
                }
            });
        });
        $("#btn").on("click", function () {
            var $YourForm = $("#YourForm").serialize();
            $.ajax({
                type: 'post',
                url: "{:U('AppApi/Member/register')}", //正式环境
                data: $YourForm,
                dataType: "json",//后台提供传输类型
//                jsonp: "jsoncallback",//跨域
                timeout: 30000,
                // 发起请求前就调用
                beforeSend: function (data) {
                    //判断输入框是否为空
                    if (!$("#YourForm .tel").val() || !$("#YourForm .code").val() || !$("#YourForm .password").val() || !$("#YourForm .password1").val()) {
                        mui.alert("信息不完整！！！");
                        return false;
                    }
                    //判断手机号码是否符合
                    if (!telReg.test($("#YourForm .tel").val())) {
                        mui.alert("请输入正确的手机号码");
                        return false;
                    }
                    if (!pwdReg.test($("#YourForm .password").val())) {
                        mui.alert("请输入6~18位密码，至少包含数字/字母符号中的2种");
                        return false;
                    }
                    //判断两次密码是否相同
                    if ($("#YourForm .password").val() != $("#YourForm .password1").val()) {
                        mui.alert("两次密码不一致");
                        return false;
                    }
//                    //判断验证码是否一致
//                    if ($("#YourForm .code").val() != code_num) {
//                        mui.alert("验证码不正确")
//                    }
//						$this.html('正在提交...').addClass("disabled").attr("disabled", true);
                },
                success: function (data) {
                    //var data = JSON.parse(data);
                    if (data.code == 200) {
                        alert('注册成功，请下载app登录');
                        window.location.reload();
                    } else {
                        alert('注册失败');
                    }
                },
                complete: function () { // 请求完成时会调用
                },
                error: function () {
                }
            });
        })
    })
</script>
</body>

</html>